<template>
  <el-aside :width="isCollapse ? '64px' : '200px'">
    <el-col class="column">
      <h5 class="mb-2" style="flex: content"></h5>
      <!-- 折叠条 -->
      <div class="toggle-button" @click="toggleCollapse()">|||</div>
      <!-- 侧边栏菜单区域 -->
      <el-menu class="el-menu-vertical-demo"
               background-color="transparent" text-color="#fff" active-text-color="#00adb5"
               :unique-opened="true"  :collapse="isCollapse"  :collapse-transition="false">
        <el-menu-item index="1" @click="toAdmin">
          <el-icon><Promotion /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="2" @click="toManageUser">
          <el-icon><UserFilled /></el-icon>
          <span>用户信息管理</span>
        </el-menu-item>
        <el-menu-item index="3" @click="toManageFlight">
          <el-icon><StarFilled /></el-icon>
          <span>航班信息管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-aside>
</template>

<script>
import {Promotion, StarFilled, UserFilled} from "@element-plus/icons-vue";

export default {
  name: 'SideAdmin',
  components: {UserFilled, StarFilled, Promotion},
  data(){
    return{
      isCollapse: false,
    }
  },
  methods:{
    //点击按钮，切换菜单的折叠与展开
    toggleCollapse(){
      this.isCollapse = !this.isCollapse;
    },
    toAdmin(){
      this.$router.push('/admin');
    },
    toManageUser(){
      this.$router.push('/manageUser');
    },
    toManageFlight(){
      this.$router.push('/manageFlight');
    },
  }
}

</script>
<style scoped>
.column{
  background: transparent;
  border-right: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border-right: none;
}
.toggle-button{
  background-color: #393e46;
  font-size: 16px;
  line-height: 24px;
  color: #00adb5;
  text-align: center;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.2em;
  border-right: none;
}
</style>
